<template>
	<view class="groupon-wrap">
		<nav-bar title="商品列表" isBack></nav-bar>
		<view class="group-head u-flex u-row-between">
					<text class="group-head__title">精品推荐</text>
					<text class="group-head__notice">推荐热卖产品</text>
				</view>
				<view class="group-box">
					<view class="goods-item u-m-b-16" v-for="(item, index) in grouponList" :key="item.id">
						<view class="big-goods u-p-20 u-flex u-col-top">
							<image v-if="index < 3" class="top-tag" :src="tagMap[index]" mode=""></image>
							<u-image ref="uImage" :width="220" :height="220" border-radius="10" :src="item.main_imgurl" mode="aspectFill"></u-image>
							<view class=" card-right u-m-l-20 u-flex-col u-row-between">
								<view class="">
									<view class="goods-title u-ellipsis-1  u-m-t-10 u-m-b-10">
										<u-tag class="title-tag u-m-r-10" text="爆品" size="mini" bg-color="#FF6600" border-color="#FF6600" color="#fff" />
										{{ item.product_title }}
									</view>
									<view v-show="item.subtitle" class="subtitle-text u-m-b-10 u-ellipsis-1">{{ item.subtitle }}</view>
								</view>
		
								<view class="u-flex u-m-y-20">
									<view class="sell-box">
										<text class=" hot-icon iconfont iconicon-test"></text>
										<text class="sell-num">已售{{ item.volume }}件</text>
									</view>
								</view>
		
								<view class=" u-flex u-row-between u-col-center">
									<view class="u-flex u-col-bottom font-OPPOSANS">
										<view class="price u-m-r-10">{{ item.price }}</view>
										<view class="origin-price">{{ item.primary_price }}</view>
									</view>
									<button class="u-reset-button buy-btn" @click="navTo(`/pages_mall/pages/mall/goods_details/goods_details?id=${item.id}`)">马上抢</button>
								</view>
							</view>
						</view>
					</view>
					<!-- 空白 -->
	                <view class="nolist" v-if="grouponList==''">
	                	   <image src="https://manager.ryz1620.com/static/my/suess.png"></image>
	                 	<text>暂无商品，先逛逛其他的吧！~</text>
	                </view>
				</view>
	</view>
</template>

<script>
	import navBar from "@/components/navBar/navBar.vue"
	import service_mall from '@/service/mall.js'
	import URL from '@/config/url.js'

	export default {
		components: {
			navBar
		},

		data() {
			return {
				tagMap: {
					0: 'https://cos.ryz1620.com/liankun/static/groupon_top1.png',
					1: 'https://cos.ryz1620.com/liankun/static/groupon_top2.png',
					2: 'https://cos.ryz1620.com/liankun/static/groupon_top3.png'
				},
				userId: "",
				tabList: [],
				tabCurrent:'',
				goodsPage:1,
				grouponList: [],
			}
		},
		onLoad(params) {
			this.$utils.getUrl()
			// this.getGoods()
			this.userId = uni.getStorageSync('userId')
			let token = uni.getStorageSync('token')
			if(params.share_uid){
				let shareuId= params.share_uid
				this.$store.commit('index/SET_shareuId', shareuId)
				if(token && shareuId){
					service_mall.getPromoter({share_uid:shareuId})
						.then(res => {
					})
				}
			}
		},
		onReachBottom() {
				this.loadMore();
		},
		onPullDownRefresh() {
			this.goodsPage = 1;
			this.grouponList = [];
			this.getGoods()
		},
		onShareAppMessage(res) {
			let that = this
			if (res.from === 'button') {}
			return {
				title: '爆款推荐',
				path: '/pages_now/pages/now/vogue/index?share_uid=' + this.userId,
				success: function(res) {}
			}
		},
		methods: {
			// 加载更多
			loadMore(){
				this.goodsPage++
				this.getGoods()
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			// 获取商品列表
			getGoods() {
					let params = {
						page: this.goodsPage,
						type:1,
					}
					service_mall.producthot(params)
						.then(res => {
							if (res.code == 1) {
								let data = res.data
								for(var i=0;i<data.length;i++){
									this.grouponList.push(data[i]); // 加载的数据追加在上一页后面
								}
							}
						})
						.catch(err => {
							
						})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
// 背景
.groupon-wrap {
	background: url('https://cos.ryz1620.com/liankun/static/sekill_list_head_bg.png') no-repeat;
	background-size: 100% 374rpx;
}
.group-head {
	padding: 0 25rpx;
	height: 100rpx;
	.group-head__title {
		font-size: 32rpx;

		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}
	.group-head__notice {
		font-size: 26rpx;

		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}
}

.group-box {
	width: 710rpx;
	background: linear-gradient(#fff, #f5f5f5);
	border-radius: 20rpx;
	margin: 0 auto;
	min-height: 800rpx;
	.goods-item {
		border-radius: 20rpx;
		background-color: #fff;
		// 大商品卡片
		.big-goods {
			width: 710rpx;
			height: 260rpx;
			background: #ffffff;
			box-shadow: 0px 7rpx 8rpx 1rpx rgba(254, 76, 29, 0.05);
			border-radius: 20rpx;
			position: relative;
			.top-tag {
				position: absolute;
				z-index: 3;
				top: 20rpx;
				left: 20rpx;
				width: 84rpx;
				height: 36rpx;
			}
			.card-right {
				width: 430rpx;
				height: 220rpx;
			}
			.goods-title {
				font-size: 26rpx;
				font-weight: 600;
				width: 400rpx;
				color: #000000;
				vertical-align: middle;
				.title-tag {
					transform: scale(0.9);
				}
			}
			.subtitle-text {
				font-size: 22rpx;
				width: 400rpx;
				font-weight: 500;
				color: #666666;
			}
			.buy-btn {
				width: 120rpx;
				margin: 0;
				line-height: 50rpx;
				background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
				border-radius: 25rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #ffffff;
			}
			// 拼团
			.sell-box {
				background: rgba(#f9efd6, 0.3);
				border-radius: 16rpx;
				line-height: 32rpx;
				.sell-num {
					font-size: 20rpx;

					font-weight: 400;
					color: #ff6904;
				}

				.hot-icon {
					font-size: 26rpx;
					color: #ff6904;
					margin-right: 8rpx;
				}
			}
			.group-num {
				font-size: 20rpx;

				font-weight: 500;
				color: rgba(153, 153, 153, 1);
				margin-left: 20rpx;
			}
			// 价格
			.price {
				color: #ff0000;
				font-weight: 600;
				&::before {
					content: '￥';
					font-size: 20rpx;
				}
			}
			.origin-price {
				color: #c4c4c4;
				font-size: 24rpx;
				text-decoration: line-through;
				&::before {
					content: '￥';
					font-size: 20rpx;
				}
			}
		}
	}
}
.seckill_tab{
	position: relative;
	z-index: 4;
	.seckill_tab_x{
		overflow-x: auto;
	}
}
	.u-ellipsis-1 {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.nolist {
		margin-top: 200rpx;
		line-height: 80rpx;
		text-align: center;
		color: #939393;
	}
	
	.nolist image {
		display: block;
		width: 288rpx;
		height: 232rpx;
		margin: auto;
	}
</style>
